<!--
 * @Description: 
 * @Autor: Zhongyu
 * @Date: 2021-03-16 16:02:51
 * @LastEditors: Zhongyu
 * @LastEditTime: 2021-03-18 09:33:13
-->

<template>
	<div id="z-menu" class="z-menu">
		<el-menu :default-active="defaultActive" @select="handleSelect">
			<template v-for="(menu, index) in datas">
				<el-submenu v-if="menu.children.length > 0" :key="index" :index="menu.key">
					<template slot="title">
						<!-- <i class="el-icon-location"></i> -->
						<span>{{ menu.title }}</span>
					</template>
					<template v-for="(children, j) in menu.children">
						<el-menu-item :key="j" :index="children.key">
							{{ children.title }}
						</el-menu-item>
					</template>
				</el-submenu>
				<el-menu-item v-else :key="index" :index="menu.key">
					{{ menu.title }}
				</el-menu-item>
			</template>
		</el-menu>
	</div>
</template>

<script>
export default {
	name: 'z-menu',
	props: {
		datas: {
			type: Array,
			default: () => {
				return [];
			},
		},
		defaultActive: [String, Number],
	},
	methods: {
		handleSelect(key, keyPath) {
			this.$emit('select', key, keyPath);
		},
	},
};
</script>
<style lang="less" src="./index.less"></style>
